<template>
  <view>
    <!-- 订单功能区 -->
    <view class="function-section">
      <view class="section-title">我的订单</view>
      <view class="order-grid">
        <view class="order-item" v-for="item in orderItems" :key="item.text">
          <image class="icon" :src="item.icon" mode="aspectFit" />
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 优惠券功能区 -->
    <view class="function-section">
      <view class="section-title">我的信息</view>
      <view class="coupon-grid">
        <view class="coupon-item" v-for="item in couponItems" :key="item.text">
          <image class="icons" :src="item.icon" mode="aspectFit" />
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
// import Taro from "@tarojs/taro";

// import BasicLayout from "@/layouts/basic-layout.vue";
// import avatarImg from "@/assets/imgs/img.png";
// import qrcodeIcon from "@/assets/imgs/code.svg";
// import arrowIcon from "@/assets/imgs/right.svg";

// 订单图标
import pendingPaymentIcon from "@/assets/imgs/wall.svg";
import tosendIcon from "@/assets/imgs/wait.svg";
// import logisticsIcon from "@/assets/imgs/auto.svg";
import afterSaleIcon from "@/assets/imgs/hexiao.svg";
// import moreIcon from "@/assets/imgs/more.svg";

// 优惠券图标
// import couponIcon from "@/assets/imgs/hexiaoma.svg";
import usedIcon from "@/assets/imgs/wangdian.svg";
// import expiredIcon from "@/assets/imgs/tuijian.svg";
// import giftIcon from "@/assets/imgs/gift.svg";

// 服务图标
// import deleteIcon from "@/assets/imgs/setting.svg";
// import feedbackIcon from "@/assets/imgs/yijian.svg";
// import questionIcon from "@/assets/imgs/wenti.svg";
// import infoIcon from "@/assets/imgs/we.svg";
// import protectIcon from "@/assets/imgs/xiyi.svg";
// import groupIcon from "@/assets/imgs/team.svg";
// import locationIcon from "@/assets/imgs/addr.svg";
// import serviceIcon from "@/assets/imgs/serve.svg";
// import QRCode from 'weapp-qrcode';


// import { QRCode } from "taro-code";
// 动态计算尺寸（适配多端）
// const size = Taro.pxTransform(300); // 转换为rpx

onMounted(() => {
  // new QRCode("qrcode", {
  //   text: "https://baidu.com",
  //   width: 200,
  //   height: 200,
  //   colorDark: "#000000",
  //   colorLight: "#ffffff",
  // });
});

// const avatar = ref(avatarImg);
// definePageConfig({
//   navigationBarTitleText: '我的',
//   navigationStyle: 'custom'
// });

const orderItems = ref([
  { icon: tosendIcon, text: "核销记录" },
  { icon: afterSaleIcon, text: "扫码记录" },
  { icon: pendingPaymentIcon, text: "提现记录" },
  // { icon: afterSaleIcon, text: "扫描订单" }
]);

const couponItems = ref([
  { icon: usedIcon, text: "店铺名称" },
  { icon: usedIcon, text: "店铺地址" },
  { icon: usedIcon, text: "店铺图片" },
  { icon: usedIcon, text: "地图位置" },
]);

// const serviceItems = ref([
//   { icon: deleteIcon, text: "清空缓存" },
//   { icon: feedbackIcon, text: "意见反馈" },
//   { icon: questionIcon, text: "常见问题" },
//   { icon: infoIcon, text: "关于我们" },
//   { icon: protectIcon, text: "隐私协议" },
//   { icon: groupIcon, text: "我的团队" },
//   { icon: locationIcon, text: "收货地址" },
//   { icon: serviceIcon, text: "联系客服" },
// ]);
</script>

<style lang="css">
.function-section {
  background: #fff;
  margin: 30rpx;
  border-radius: 20rpx;
  padding: 0 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}

.function-section .section-title {
  padding: 30rpx 0;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;
}

.function-section .order-grid {
  display: flex;
  padding: 30rpx 0;
}

.function-section .order-grid .order-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.function-section .order-grid .order-item .icon {
  width: 48rpx;
  height: 48rpx;
}

.function-section .order-grid .order-item text {
  margin-top: 16rpx;
  font-size: 26rpx;
  color: #666;
}

.function-section .coupon-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}

.function-section .coupon-grid .coupon-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.function-section .coupon-grid .coupon-item .icons {
  width: 48rpx;
  height: 48rpx;
}

.function-section .coupon-grid .coupon-item text {
  margin-top: 16rpx;
  font-size: 26rpx;
  color: #666;
}
</style>